<!--  -->
<template>
    <div class=''>
        <Table border ref="selection" :loading="loading" :span-method="handleSpan" :columns="columns" :data="RecipeData"
            :height="tableHeight">
            <template slot-scope="{ row }" slot="operation">
                <div class="flex">
                    <Button class="mr_10" type="primary" size="small" :style="{ color: '#ffffff', padding: '0 8px' }"
                        @click="onShow(row)">
                        详情
                    </Button>
                    <Button type="primary" size="small" :style="{ color: '#ffffff', padding: '0 8px' }"
                        @click="onAudit(row)">
                        审核
                    </Button>
                </div>
            </template>
        </Table>
        <div class="cus_page">
            <cus-page :data="pages" class="mt_10" @pageChange="getRecipeListApi()"></cus-page>
        </div>
        <recipeDetails ref="recipeDetails"></recipeDetails>
        <recipeModal ref="recipeModal"></recipeModal>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 食谱详情页面
import recipeDetails from './recipeDetails.vue'
// 食谱审核
import recipeModal from "./recipeModal.vue";
export default {
    //import引入的组件需要注入到对象中才能使用
    props: {
        from: {
            type: Object,
            default: () => {

            }
        }
    },
    components: { recipeDetails, recipeModal },
    data() {
        //这里存放数据
        return {
            RecipeData: [], // 食谱列表
            columns: [
                {
                    title: "序号",
                    width: 70,
                    key: 'index',
                    align: "center",
                },
                {
                    title: "伙食单位",
                    key: "unitName",
                    width: 190,
                    resizable: true,
                    align: "center",
                },
                {
                    title: "食谱周期",
                    key: "planDate",
                    width: 190,
                    resizable: true,
                    align: "center",
                },
                {
                    title: "档口",
                    key: "stallName",
                    width: 190,
                    //   sortable: true,
                    resizable: true,
                    align: "center",
                },
                {
                    title: "提交时间",
                    key: "submitTime",
                    width: 190,
                    sortable: true,
                    resizable: true,
                    align: "center",
                },
                {
                    title: "审核状态",
                    key: "organAuditStateName",
                    width: 190,
                    resizable: true,
                    align: "center",
                },
                {
                    title: "备注",
                    key: "remark",
                    //   width: 260,
                    resizable: true,
                    align: "center",
                },
                {
                    title: "操作",
                    width: 190,
                    // fixed: "right",
                    slot: "operation",
                    align: "center",
                },
            ],
            pages: {
                page: 1,
                pageSize: 10,
                pageTotal: 0,
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    //方法集合
    methods: {
        // 初始化
        onInit() {
            this.getRecipeListApi()
            setTimeout(() => {
                this.tableHeight = window.innerHeight - 355; // 表格自适应高度
            }, 100);
            window.addEventListener("resize", this.tableHeightChange, true);
        },
        // 表格高度变化
        tableHeightChange() {
            this.tableHeight = 0;
            setTimeout(() => {
                this.tableHeight = window.innerHeight - 355; // 表格自适应高度

            }, 100);
        },
        // 食谱详情展示
        onShow(row) {
            if (row) {
                this.$refs["recipeDetails"].id = row.mealPlanId
                this.$refs["recipeDetails"].show();
            }
        },
        // 审核模块展示
        onAudit(row) {
            this.$refs['recipeModal'].show()
        },
          // 获取食谱列表
    getRecipeListApi() {
      this.loading = true
      return new Promise((resolve) => {
        let params = {
          startDate : this.form.dateTime[0]
          ? new Date(this.form.dateTime[0]).Format("yyyy-MM-dd")
          : null,
          stopDate : this.form.dateTime[1]
          ? new Date(this.form.dateTime[1]).Format("yyyy-MM-dd")
          : null,
        organAuditState: this.form.organAuditState == 'all' ? '' :  this.form.organAuditState,
        unitCode: this.form.unitCode == 'all' ? '' :  this.form.unitCode, 
        currentPage : this.pages.page,
        pageSize : this.pages.pageSize
        }
        RecipeList(params).then((res) => {
          this.loading = false
          if (res.code == 1) {
            this.RecipeData = []
            this.notSubmitNum = res.data.notSubmitNum
            this.submitNum = res.data.submitNum
            res.data.mealPlanUnitPagePageVo.list.forEach(item => {
              if (item.mealPlanUnitStalls) {
                item.mealPlanUnitStalls.forEach(it => {
                  it.unitName = item.unitName
                  it.planDate = item.planDate
                })
                this.RecipeData.push(...item.mealPlanUnitStalls)
              }
            })
            //  this.RecipeData = res.data.mealPlanUnitPagePageVo.list
            this.assembleData(this.RecipeData)
            this.pages.pageTotal = res.data.mealPlanUnitPagePageVo.total;
          }
        })
      });
    }
    },

}
</script>
<style scoped></style>